<template>
  <div>
    <button @click="buttonClick(0)">0</button>
    <button @click="buttonClick(1)">1</button>
    <button @click="buttonClick(2)">2</button>
    <div id="main" style="width: 100%; height: 400px"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "homePage",
  data() {
    return {
      echarts2: "/echarts2",
      echartsData: [
        [5, 20, 36, 10, 10, 20],
        [10, 25, 30, 20, 10,10],
        [20, 30, 16, 10, 20, 10],
      ],
      dataX: [
        ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        ["衣服", "裤子", "袜子", "保暖衣",'鞋子','背包'],
        ["冰箱", "电视", "洗衣机", "空调", "电饭煲",'电磁炉'],
      ],
      buttonVal: 0,
    };
  },
  watch: {
    buttonVal: function (newQuestion, oldQuestion) {
      this.drawChart();
    },
  },
  methods: {
    buttonClick(buttonVal) {
      this.buttonVal = buttonVal;
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      //   let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          //   data: ["销量"]
        },
        xAxis: {
          data: this.dataX[this.buttonVal],
        },
        yAxis: {},
        series: [
          {
            // name: "销量",
            type: "bar",
            data: this.echartsData[this.buttonVal],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
  },
};
</script>
